<template>
  <div :class="['image-container', imgLabelPosition]">
    <div v-if="viewType.includes('label')" style="cursor: pointer" @click="previewOpen">{{ imgLabel }}</div>
    <template v-if="viewType !== 'label'"> </template>
    <div class="img-list">
      <el-image
        v-for="src in showSrcList"
        preview-teleported
        :key="src"
        :src="src"
        :fit="fit"
        :preview-src-list="previewSrcList"
        :initial-index="initialIndex"
        :infinite="infinite"
        :zoom-rate="zoomRate"
        :min-scale="minScale"
        :max-scale="maxScale"
        :z-index="9999"
        :style="{
          width: width + 'px',
          height: height + 'px',
          cursor: 'pointer'
        }"
        @click="imgPreviewOpen"
      >
        <template #error>
          <div class="image-slot">
            <el-icon><Picture /></el-icon>
          </div>
        </template>
      </el-image>
    </div>
    <el-image-viewer
      v-if="showPreview"
      hide-on-click-modal
      teleported
      :url-list="previewSrcList"
      :z-index="9999"
      :initial-index="initialIndex"
      :infinite="infinite"
      :zoom-rate="zoomRate"
      :min-scale="minScale"
      :max-scale="maxScale"
      @close="previewClose"
    />
  </div>
</template>

<script>
export default {
  name: 'ImgViewer',
  props: {
    modelValue: {
      type: [Array, String],
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {}
    },
    bindImgList: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    fit: {
      type: String,
      default: ''
    },
    initialIndex: {
      type: Number,
      default: 0
    },
    infinite: {
      type: Boolean,
      default: false
    },
    viewType: {
      type: String,
      default: 'image'
    },
    imgLabel: {
      type: String,
      default: ''
    },
    imgLabelPosition: {
      type: String,
      default: 'top'
    },
    zoomRate: {
      type: Number,
      default: 1.2
    },
    minScale: {
      type: Number,
      default: 0.2
    },
    maxScale: {
      type: Number,
      default: 7
    },
    withoutPreview: {
      type: Boolean,
      default: false
    },
    click: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      showSrcList: [],
      previewSrcList: undefined,
      showPreview: false
    };
  },
  watch: {
    formData: {
      handler() {
        this.init();
      },
      immediate: true,
      deep: true
    },
    modelValue: {
      handler() {
        this.init();
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      if (this.formData && this.bindImgList && this.formData[this.bindImgList]) {
        if (typeof this.formData[this.bindImgList] == 'string') {
          this.previewSrcList = [this.formData[this.bindImgList]];
        } else {
          this.previewSrcList = this.formData[this.bindImgList];
        }
      } else {
        if (typeof this.modelValue == 'string') {
          this.previewSrcList = [this.modelValue];
        } else {
          this.previewSrcList = this.modelValue;
        }
      }
      if (this.previewSrcList && this.previewSrcList.length) {
        // 对url列表处理，如果相对路径没有拼接baseUrl，需要前端拼接
        this.previewSrcList = this.previewSrcList.map((src) => {
          if (src.startsWith('http')) {
            return src;
          }
          if (!src.includes(import.meta.env.VITE_APP_BASE_API)) {
            return import.meta.env.VITE_APP_BASE_API + src;
          } else {
            return src;
          }
        });
        if (this.viewType == 'single-image') {
          this.showSrcList = this.previewSrcList[0];
        } else {
          this.showSrcList = this.previewSrcList;
        }
      }
      if (this.withoutPreview) {
        this.previewSrcList = undefined;
      }
    },
    previewOpen() {
      if (this.previewSrcList && this.previewSrcList.length) {
        this.showPreview = true;
      }
      console.log('previewOpen', this.click);
      if (this.click && typeof this.click == 'function') {
        this.click();
      }
    },
    imgPreviewOpen() {
      if (this.click && typeof this.click == 'function') {
        this.click();
      }
    },
    previewClose() {
      this.showPreview = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;

  .img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }
}

.top {
  flex-direction: column;
}

.bottom {
  flex-direction: column-reverse;
}

.left {
  flex-direction: row;
}

.right {
  flex-direction: row-reverse;
}
</style>